var ul = document.querySelector("ul");
left_arrow = document.querySelector(".left_arrow"),
	right_arrow = document.querySelector(".right_arrow"),
	point_list = document.querySelectorAll("ol li"),
	now_index = 0;

right_arrow.addEventListener("click", function() {
	point_list[now_index].classList.remove("active");
	if (++now_index == point_list.length) {
		now_index = 0;
	}
	ul.style.transform = `translateX(-${now_index}00%)`;
	point_list[now_index].classList.add("active");
})

left_arrow.addEventListener("click", function() {
	point_list[now_index].classList.remove("active");
	if (--now_index == -1) {
		now_index = point_list.length - 1;
	}
	ul.style.transform = `translateX(-${now_index}00%)`
	point_list[now_index].classList.add("active");
})
setInterval(function(){
	point_list[now_index].classList.remove("active");
	if(++now_index == point_list.length){
		now_index = 0;
	}
	ul.style.transform = `translateX(-${now_index}00%)`;
	point_list[now_index].classList.add("active");
},2000);

point_list.forEach(function(obj,index){

	obj.addEventListener("click",function(){
		for(var i = 0;i<4;i++){
		point_list[i].classList.remove("active");
	}
		obj.classList.add("active");
		now_index = index;
		ul.style.transform = `translateX(-${now_index}00%)`;
	})	
	
})

// 1.小圆点的激活类要对应上
// 2.自动轮播(2s轮播一次)
// 3.鼠标移入时,停止轮播,移出时恢复自动轮播
// 4.点击小圆点,显示对应下标的图片